<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div
                class="comment-list-dialog"
                v-if="dialogStore.isCaseCommentListDialogVisible"
            >
                <div
                    class="comment-list-dialog__mask"
                    @click="dialogStore.isCaseCommentListDialogVisible = false"
                ></div>
                <div class="comment-list-dialog__content">
                    <div class="comment-list-dialog__title">精彩评论</div>

                    <div class="comment-list" v-loading="isPageLoading">
                        <div
                            class="comment-item"
                            v-for="(item, index) in CommentList"
                            :key="item.id"
                        >
                            <div class="avatar">
                                <img
                                    :src="
                                        item.user.avatar ||
                                        `${_oss_}images/user/default-avatar.png`
                                    "
                                />
                            </div>

                            <div class="right-comment">
                                <div class="comment-user">
                                    {{ item.user.mobile }}
                                </div>
                                <div class="comment-content">
                                    <div
                                        class="content-box"
                                        v-html="formatComment(item.comment)"
                                    ></div>

                                    <img
                                        class="icon-delete"
                                        :src="`${_oss_}images/icon-delete.svg`"
                                        v-if="
                                            userStore.userInfo.id == item.uid ||
                                            userStore.userInfo.id ==
                                                item.author_id
                                        "
                                        @click="onDelComment(item)"
                                    />
                                </div>
                                <div class="comment-time">
                                    {{ item.createtime }}
                                </div>

                                <div class="comment-tools">
                                    <CommentReplyCaseM
                                        :commentId="item.id"
                                        :toUid="item.uid"
                                        :toUName="
                                            item.user.nickname ||
                                            item.user.mobile
                                        "
                                        :examcaseId="item.examcase_id"
                                        @success="GetReply(index)"
                                    />
                                </div>

                                <CommentReplyCaseListM
                                    :commentId="item.id"
                                    :examcaseId="item.examcase_id"
                                    :list="item.reply"
                                    @replySuccess="GetReply(index)"
                                    @del="(item) => onDelReply(item, index)"
                                    :authorId="item.author_id"
                                    v-if="item.reply.length"
                                />
                            </div>
                        </div>

                        <el-empty
                            :image-size="150"
                            description="暂无评论"
                            v-if="!isPageLoading && CommentList.length === 0"
                        />
                    </div>

                    <div class="comment-area">
                        <div class="comment-area__title">
                            评论
                            <span class="comment-area__small-title">
                                共{{ CommentList.length }}条评论
                            </span>
                        </div>

                        <div class="tools">
                            <EmojiPickerM @select-emoji="onSelectEmoji" />
                        </div>

                        <el-input
                            v-model="comment"
                            type="textarea"
                            class="comment-input"
                            resize="none"
                            placeholder="请输入评论内容"
                        ></el-input>

                        <div class="btn-group">
                            <el-button
                                type="default"
                                onfocus="this.blur()"
                                size="small"
                                @click="onClose"
                            >
                                关闭
                            </el-button>
                            <el-button
                                onfocus="this.blur()"
                                type="primary"
                                size="small"
                                @click="onSend"
                                :loading="isBtnLoading"
                            >
                                发表评论
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>

    <DialogCommentDelM
        v-model:show="isShowDeleteDialog"
        :onConfirm="onDeleteConfirm"
    />
</template>
<script setup>
import { useContent } from ".";

const {
    isShowDeleteDialog,
    isBtnLoading,
    isPageLoading,
    comment,
    CommentList,
    formatComment,
    onClose,
    onSend,
    onSelectEmoji,
    GetReply,
    onDelComment,
    onDeleteConfirm,
    onDelReply,
} = useContent();
const dialogStore = useDialogStore();
const userStore = useUserStore();
</script>
<style lang="scss" scoped>
.comment-list-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        height: 80%;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
    }

    &__title {
        color: #333;
        padding: 20px 20px 0;
        font-weight: bold;
    }

    .comment-list {
        height: calc(100% - 240px);
        padding: 0 20px;
        overflow: auto;
    }

    .comment-item {
        display: flex;
        padding: 20px 0;
        border-bottom: 1px solid #ddd;

        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .right-comment {
            width: 100%;
            padding-top: 6px;
            margin-left: 7px;
        }

        .comment-user {
            color: #333;
            font-size: 14px;
            font-weight: bold;
        }

        .comment-content {
            position: relative;

            .content-box {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                font-size: 14px;
                line-height: 20px;
                color: #555;
                margin-top: 10px;
                word-wrap: break-word;
                word-break: break-word;
                padding-right: 20px;

                :deep(img[emoji-icon]) {
                    width: 24px;
                    height: 24px;
                }
            }

            .icon-delete {
                position: absolute;
                top: 2px;
                right: 0;
                width: 14px;

                cursor: pointer;
            }
        }

        .comment-time {
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }
    }

    .comment-area {
        border-top: 6px solid #ddd;
        margin-top: 20px;
        padding: 20px;
        height: 200px;

        &__title {
            display: flex;
            align-items: flex-end;
            font-weight: bold;
            font-size: 20px;
            color: #333;
        }

        &__small-title {
            color: #999;
            font-size: 14px;
            font-weight: normal;
            margin-left: 3px;
        }

        .btn-group {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }

        .comment-input {
            margin-top: 5px;
        }
    }

    .tools {
        margin-top: 10px;
    }
}
</style>
